<!DOCTYPE html>
<html>

<head>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js"
    integrity="sha512-6xoV9qvQHPMnIFWzWrRwuq25qpgJ8FiGKekJ+7Bstb8/4XRC98k2c49IpdUVc5QitMNHKWPcFjFUkDxdIjJ7Nw=="
    crossorigin="anonymous">
  </script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython_stdlib.min.js"
    integrity="sha512-QbMgbJbXnZv0V/+jpdd68nkyOrYwP/UsJAH/TGQmVHgwwrxI7QNKzRn3dKuG3kG/lVWHx5hYXBISk7zX86TInw=="
    crossorigin="anonymous">
  </script>
  <style>
    table { border-collapse: collapse; }
    table, th, td { border: 1px solid grey; }
  </style>
</head>

<body onload="brython()">

<script type="text/python">
from browser import document, prompt, html
import base64

b64_map = {}

def base64_compute(_) -> None:
    default = "Real Python"
    data = prompt("Enter a string:", default)
    data = data or default
    b64data = base64.b64encode(data.encode()).decode()
    b64_map[data] = b64data
    display_map()

def display_map() -> None:
    table = html.TABLE(style={'border': '1 solid grey'})
    table <= html.TR(html.TH("Text") + html.TH("Base64"))
    table <= (html.TR(html.TD(key) + html.TD(b64_map[key])) for key in b64_map)
    document["base64-res"].clear()
    document["base64-res"] <= table

document["base64-btn"].bind("click", base64_compute)
</script>

<button id="base64-btn">Base64</button>
<br/>
<div id="base64-res"></div>

</body>
</html>
